<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_事件处理</title>
</head>
<body>
<!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
  .keycode : 操作的是某个keycode值的健
  .enter : 操作的是enter键
-->

<div id="example">

    <h2>1. 绑定监听</h2>
    <button @click="test1()">测试1</button>
    <button @click="test2">默认事件对象</button>
    <button @click="test3($event,'aaaa')">event</button>

    <h2>2. 事件修饰符</h2>
    <!-- @click.stop 停止事件冒泡 -->
    <div style="background: red;width: 200px;height: 200px" @click="clickRed">
        <div style="background: blue;width: 100px;height: 100px" @click.stop="clickBlue"></div>
    </div>

    <a href="http://www.baidu.com" @click.prevent="clickA">@click.prevent阻止事件默认行为</a>

    <h2>3. 按键修饰符</h2>
    <input type="text" @keyup.enter="clickInput">

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {},
    methods: {
      test1() {
        alert('test1...')
      },

      test2(event) {
        alert(event.target.innerHTML)
      },

      test3(event, text) {
        alert(event.target.innerHTML + '----' + text)
      },
      clickRed() {
        alert('red...')
      },
      clickBlue() {
        alert('blue...')
      },
      clickA() {
        alert('@click.prevent...')
      },
      clickInput(){
        alert("clickInput....")
      }


    }
  })
</script>
</body>
</html>
